<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
</head>
<body>
<div id="app">
    <template>
        <el-form :model="formData" ref="formData" :rules="rules" label-width="100px" style="margin-top: 5%">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="菜单名称" prop="menuName">
                        <el-input size="small" v-model="formData.menuName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="上级菜单" prop="parentId">
                        <el-cascader style="width: 100%" size="small" v-model="formData.parentId" :options="parentMenu"
                                     :props="{value:'id', label:'menuName', checkStrictly:true, expandTrigger:'hover', emitPath:false}"
                                     :show-all-levels="false" clearable></el-cascader>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="URL" prop="url">
                        <el-input size="small" v-model="formData.url"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="排序" prop="sort">
                        <el-input-number size="small" v-model="formData.sort" :min="1" :max="99"
                                         style="width:100%"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="图标" prop="icon">
                        <el-select v-model="formData.icon" placeholder="选择图标" style="width: 100%" size="small">
                            <el-option
                                    v-for="icon in iconList"
                                    :key="icon"
                                    :label="icon"
                                    :value="icon"
                            >
                                <i :class="['' + icon]"></i>
                                {{ icon }}
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="类型" prop="menuType">
                        <el-select class="item-choose" style="width: 100%" v-model="formData.menuType" size="small">
                            <el-option
                                    v-for="(item,index) in options"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div style="text-align: center;margin-top: 5%">
            <el-button size="small" @click="closePage">取 消</el-button>
            <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
        </div>
    </template>
</div>
</body>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/request.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>
<script>
    let id = getQueryString("id");
    new Vue({
        el: '#app',
        data() {
            return {
                formData: {
                    id: '',
                    menuName: '',
                    parentId: '',
                    sort: 1,
                    menuType: "",
                    url: '',
                    perms: '',
                    icon: '',
                    remark: ''
                },
                options: [
                    {
                        value: '1',
                        label: '目录'
                    }, {
                        value: '2',
                        label: '菜单'
                    }, {
                        value: '3',
                        label: '按钮'
                    }],
                iconList: [
                    'el-icon-platform-eleme',
                    'el-icon-eleme',
                    'el-icon-delete-solid',
                    'el-icon-delete',
                    'el-icon-s-tools',
                    'el-icon-setting',
                    'el-icon-user-solid',
                    'el-icon-user',
                    'el-icon-phone',
                    'el-icon-phone-outline',
                    'el-icon-more',
                    'el-icon-more-outline',
                    'el-icon-star-on',
                    'el-icon-star-off',
                    'el-icon-s-goods',
                    'el-icon-goods',
                    'el-icon-warning',
                    'el-icon-warning-outlin',
                    'el-icon-question',
                    'el-icon-info',
                    'el-icon-remove',
                    'el-icon-circle-plus',
                    'el-icon-success',
                    'el-icon-error',
                    'el-icon-zoom-in',
                    'el-icon-zoom-out',
                    'el-icon-remove-outline',
                    'el-icon-circle-plus-ou',
                    'el-icon-circle-check',
                    'el-icon-circle-close',
                    'el-icon-s-help',
                    'el-icon-help',
                    'el-icon-minus',
                    'el-icon-plus',
                    'el-icon-check',
                    'el-icon-close',
                    'el-icon-picture',
                    'el-icon-picture-outlin',
                    'el-icon-picture-outlin',
                    'el-icon-upload',
                    'el-icon-upload2',
                    'el-icon-download',
                    'el-icon-camera-solid',
                    'el-icon-camera',
                    'el-icon-video-camera-s',
                    'el-icon-video-camera',
                    'el-icon-message-solid',
                    'el-icon-bell',
                    'el-icon-s-cooperation',
                    'el-icon-s-order',
                    'el-icon-s-platform',
                    'el-icon-s-fold',
                    'el-icon-s-unfold',
                    'el-icon-s-operation',
                    'el-icon-s-promotion',
                    'el-icon-s-home',
                    'el-icon-s-release',
                    'el-icon-s-ticket',
                    'el-icon-s-management',
                    'el-icon-s-open',
                    'el-icon-s-shop',
                    'el-icon-s-marketing',
                    'el-icon-s-flag',
                    'el-icon-s-comment',
                    'el-icon-s-finance',
                    'el-icon-s-claim',
                    'el-icon-s-custom',
                    'el-icon-s-opportunity',
                    'el-icon-s-data',
                    'el-icon-s-check',
                    'el-icon-s-grid',
                    'el-icon-menu',
                    'el-icon-share',
                    'el-icon-d-caret',
                    'el-icon-caret-left',
                    'el-icon-caret-right',
                    'el-icon-caret-bottom',
                    'el-icon-caret-top',
                    'el-icon-bottom-left',
                    'el-icon-bottom-right',
                    'el-icon-back',
                    'el-icon-right',
                    'el-icon-bottom',
                    'el-icon-top',
                    'el-icon-top-left',
                    'el-icon-top-right',
                    'el-icon-arrow-left',
                    'el-icon-arrow-right',
                    'el-icon-arrow-down',
                    'el-icon-arrow-up',
                    'el-icon-d-arrow-left',
                    'el-icon-d-arrow-right',
                    'el-icon-video-pause',
                    'el-icon-video-play',
                    'el-icon-refresh',
                    'el-icon-refresh-right',
                    'el-icon-refresh-left',
                    'el-icon-finished',
                    'el-icon-sort',
                    'el-icon-sort-up',
                    'el-icon-sort-down',
                    'el-icon-rank',
                    'el-icon-loading',
                    'el-icon-view',
                    'el-icon-c-scale-to-ori',
                    'el-icon-date',
                    'el-icon-edit',
                    'el-icon-edit-outline',
                    'el-icon-folder',
                    'el-icon-folder-opened',
                    'el-icon-folder-add',
                    'el-icon-folder-remove',
                    'el-icon-folder-delete',
                    'el-icon-folder-checked',
                    'el-icon-tickets',
                    'el-icon-document-remov',
                    'el-icon-document-delet',
                    'el-icon-document-copy',
                    'el-icon-document-check',
                    'el-icon-document',
                    'el-icon-document-add',
                    'el-icon-printer',
                    'el-icon-paperclip',
                    'el-icon-takeaway-box',
                    'el-icon-search',
                    'el-icon-monitor',
                    'el-icon-attract',
                    'el-icon-mobile',
                    'el-icon-scissors',
                    'el-icon-umbrella',
                    'el-icon-headset',
                    'el-icon-brush',
                    'el-icon-mouse',
                    'el-icon-coordinate',
                    'el-icon-magic-stick',
                    'el-icon-reading',
                    'el-icon-data-line',
                    'el-icon-data-board',
                    'el-icon-pie-chart',
                    'el-icon-data-analysis',
                    'el-icon-collection-tag',
                    'el-icon-film',
                    'el-icon-suitcase',
                    'el-icon-suitcase-1',
                    'el-icon-receiving',
                    'el-icon-collection',
                    'el-icon-files',
                    'el-icon-notebook-1',
                    'el-icon-notebook-2',
                    'el-icon-toilet-paper',
                    'el-icon-office-buildin',
                    'el-icon-school',
                    'el-icon-table-lamp',
                    'el-icon-house',
                    'el-icon-no-smoking',
                    'el-icon-smoking',
                    'el-icon-shopping-cart-',
                    'el-icon-shopping-cart-',
                    'el-icon-shopping-cart-',
                    'el-icon-shopping-bag-1',
                    'el-icon-shopping-bag-2',
                    'el-icon-sold-out',
                    'el-icon-sell',
                    'el-icon-present',
                    'el-icon-box',
                    'el-icon-bank-card',
                    'el-icon-money',
                    'el-icon-coin',
                    'el-icon-wallet',
                    'el-icon-discount',
                    'el-icon-price-tag',
                    'el-icon-news',
                    'el-icon-guide',
                    'el-icon-male',
                    'el-icon-female',
                    'el-icon-thumb',
                    'el-icon-cpu',
                    'el-icon-link',
                    'el-icon-connection',
                    'el-icon-open',
                    'el-icon-turn-off',
                    'el-icon-set-up',
                    'el-icon-chat-round',
                    'el-icon-chat-line-roun',
                    'el-icon-chat-square',
                    'el-icon-chat-dot-round',
                    'el-icon-chat-dot-squar',
                    'el-icon-chat-line-squa',
                    'el-icon-message',
                    'el-icon-postcard',
                    'el-icon-position',
                    'el-icon-turn-off-micro',
                    'el-icon-microphone',
                    'el-icon-close-notifica',
                    'el-icon-bangzhu',
                    'el-icon-time',
                    'el-icon-odometer',
                    'el-icon-crop',
                    'el-icon-aim',
                    'el-icon-switch-button',
                    'el-icon-full-screen',
                    'el-icon-copy-document',
                    'el-icon-mic',
                    'el-icon-stopwatch',
                    'el-icon-medal-1',
                    'el-icon-medal',
                    'el-icon-trophy',
                    'el-icon-trophy-1',
                    'el-icon-first-aid-kit',
                    'el-icon-discover',
                    'el-icon-place',
                    'el-icon-location',
                    'el-icon-location-outli',
                    'el-icon-location-infor',
                    'el-icon-add-location',
                    'el-icon-delete-locatio',
                    'el-icon-map-location',
                    'el-icon-alarm-clock',
                    'el-icon-timer',
                    'el-icon-watch-1',
                    'el-icon-watch',
                    'el-icon-lock',
                    'el-icon-unlock',
                    'el-icon-key',
                    'el-icon-service',
                    'el-icon-mobile-phone',
                    'el-icon-bicycle',
                    'el-icon-truck',
                    'el-icon-ship',
                    'el-icon-basketball',
                    'el-icon-football',
                    'el-icon-soccer',
                    'el-icon-baseball',
                    'el-icon-wind-power',
                    'el-icon-light-rain',
                    'el-icon-lightning',
                    'el-icon-heavy-rain',
                    'el-icon-sunrise',
                    'el-icon-sunrise-1',
                    'el-icon-sunset',
                    'el-icon-sunny',
                    'el-icon-cloudy',
                    'el-icon-partly-cloudy',
                    'el-icon-cloudy-and-sun',
                    'el-icon-moon',
                    'el-icon-moon-night',
                    'el-icon-dish',
                    'el-icon-dish-1',
                    'el-icon-food',
                    'el-icon-chicken',
                    'el-icon-fork-spoon',
                    'el-icon-knife-fork',
                    'el-icon-burger',
                    'el-icon-tableware',
                    'el-icon-sugar',
                    'el-icon-dessert',
                    'el-icon-ice-cream',
                    'el-icon-hot-water',
                    'el-icon-water-cup',
                    'el-icon-coffee-cup',
                    'el-icon-cold-drink',
                    'el-icon-goblet',
                    'el-icon-goblet-full',
                    'el-icon-goblet-square',
                    'el-icon-goblet-square-',
                    'el-icon-refrigerator',
                    'el-icon-grape',
                    'el-icon-watermelon',
                    'el-icon-cherry',
                    'el-icon-apple',
                    'el-icon-pear',
                    'el-icon-orange',
                    'el-icon-coffee',
                    'el-icon-ice-tea',
                    'el-icon-ice-drink',
                    'el-icon-milk-tea',
                    'el-icon-potato-strips',
                    'el-icon-lollipop',
                    'el-icon-ice-cream-squa',
                    'el-icon-ice-cream-roun'
                ],
                rules: {
                    menuName: [
                        {required: true, message: '请输入', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                    ]
                },
                parentMenu: []
            }
        },
        created() {
            requests.get('/sys/menu/get/' + id)
                .then((res) => {
                    if (res.code === '200') {
                        this.formData = res.data;
                        this.formData.menuType=res.data.menuType.toString()
                    }
                });
            let queryParam = {"type": "1"};
            requests.post('/sys/menu/list', JSON.parse(JSON.stringify(queryParam))).then((res) => {
                    if (res.code === '200') {
                        this.parentMenu = res.data;
                    }
                });
        },
        methods: {
            handleSubmit() {
                addOrUpdate('/sys/menu/update', this);
            }
        }
    });
</script>
</html>
